<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js">

    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
</head>
<body>
    <!--
      1、为什么要跨域？
          XMLHTTPRequest-----本身不支持跨域，只能在同源下边获取数据，进行交互
             当然，现在还有一种手段，cors跨域手段（限制条件，只有在高版本的ie，ie10以上才支持）
     2、  为什么jsonp（传输协议）可以跨域？
        （1）因为script标签的src支持在不同的服务器上面获取东西
        （2）json这种数据交换的格式，可以作为不同语言的交换方式

    3、jsonp有什么特点？跨域原理是什么？
     （1）利用callback参数跟服务器交互
     （2）因为服务器要把数据通过callback携带着返回给你
    -->
    <button id="btn">请求数据</button>
<div></div>
<script type="text/javascript">
    //跨域，借助script的src属性
  document.getElementById("btn").onclick=function () {
      //1、创建一个新的script标签
      var sp=document.createElement("script");
      //首先发给服务器的地址需要拼接callback参数，
      //callback对应的value值就是回调函数，服务器借助这个回调函数把你需要的数据传递给你
      sp.src="data/json1?callback=fn"
      //appendChild()给某个父元素添加子节点
      document.body.appendChild(sp);
  };
      function  fn(data) {
            console.log(data);
      }



</script>
</body>
</html>